<template>
  <van-nav-bar title="我的" />
  <div class="box">
    <div class="toubu">
      <!-- 头像 -->
      <van-image
        round
        width="10rem"
        height="10rem"
        :src="store.mydata.userimg"
      />

      <!-- 昵称+手机号 -->
       <div class="sj">
            <div class="username" style="color: red;">{{store.mydata.username}}</div>
            <div class="userphone">{{ store.mydata.userphone }}</div>
       </div>
    </div>
    <!-- 菜单栏 -->
     <div class="menu">
        <div class="menuitem">
            <van-cell title="我的订单" is-link :to="'/myorder'"/>
        </div>
        <div class="menuitem">
            <van-cell title="待支付" is-link />
        </div>
        <div class="menuitem">
            <van-cell title="我的地址" is-link />
        </div>
        <div class="menuitem">
            <van-cell title="意见反馈" is-link />
        </div>
        <div class="menuitem">
            <van-cell title="售后服务" is-link />
        </div>
     </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/store/my";
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore();
console.log(store.mydata)
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.box{
    padding: 0 20px;
    .toubu{
        display: flex;
        .sj{
            display: flex;
            flex-direction: column;
            margin-left: 30px;
            line-height: 40px;
        }
    }
    .menu{
        margin-top:20px;
        .menuitem{
            .van-cell{
                background:#eee;
            }
        }
    }
}
</style>
